/**
 * Created by yujianfu on 2019/9/11.
 */
import React from 'react'

import {Table, Form, DatePicker, Button, Select, Radio} from 'antd'

const {RangePicker} = DatePicker
const FormItem = Form.Item
const {Option} = Select;
import {fetchPost} from '../../utils/request'
import moment from 'moment'
import ReportCommon from './ReportCommon'

class CollectionRepaymentDateBased extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      params: {},
      startDate: null,
      endDate: null,
      loanType: '',
      bucketList: []
    }
  }

  componentDidMount() {
    this.getBucketList();
  }


  getBucketList() {
    var queryKey = "bucketList";
    fetchPost(`/bizStats/general/query`, {queryKey}).then(json => {

      if (json && json.data != null && JSON.stringify(json.data) != '{}' && json.code === 0) {
        let keyList = json.data[`${queryKey}KeyList`]
        let data = json.data[queryKey]

        this.setState({
          bucketList: data
        })
      }
    });
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, fieldsValue) => {
      const rangeValue = fieldsValue['range-picker']
      let loanType = fieldsValue['loanType']
      const stageCode = fieldsValue['stageCode']
      let startDate = moment(rangeValue[0], 'YYYY-MM-DD')
      let endDate = moment(rangeValue[1], 'YYYY-MM-DD')

      if (typeof loanType == 'undefined' || loanType == null) {
        loanType = ''
      }

      this.setState({
        params: {startDate, endDate, loanType, stageCode}
      })
    })
  }

  render() {

    const dateFormat = 'YYYY-MM-DD'
    const rangeConfig = {
      rules: [{type: 'array', required: true, message: 'Please select Time!'}],
      initialValue: [this.state.startDate != null ? moment(this.state.startDate, dateFormat) : moment().subtract(7, 'days'),
        this.state.endDate != null ? moment(this.state.endDate, dateFormat) : moment()]
    }

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
    }
    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="RepaymentDate"

          >
            {getFieldDecorator('range-picker', rangeConfig)(
              <RangePicker/>
            )}
          </FormItem>

          <FormItem
            label="LoanType"
          >
            {getFieldDecorator('loanType', {initialValue: ''})(
              <Radio.Group>
                <Radio.Button value=''>All</Radio.Button>
                <Radio.Button value='1'>New</Radio.Button>
                <Radio.Button value='2'>Repeat</Radio.Button>
              </Radio.Group>
            )}
          </FormItem>

          {/*<FormItem label="Bucket" hasFeedback>*/}
          {/*  {getFieldDecorator('stageCode', {*/}
          {/*    rules: [{required: true, message: 'select Bucket!'}]*/}
          {/*  })(<Select style={{"width": "120px"}}>*/}
          {/*    {this.state.bucketList.map((v, k) => {*/}
          {/*      if (v.name == "D0")*/}
          {/*        return;*/}
          {/*      return <Option key={v.code} value={v.code}>{v.name}</Option>*/}
          {/*    })}*/}
          {/*  </Select>)}*/}
          {/*</FormItem>*/}

          <FormItem>
            <Button type="primary" htmlType="submit">Search</Button>
          </FormItem>

        </Form>
        <br/>
        <br/>
        <ReportCommon params={this.state.params} queryKey="collectionStatsByRepaymentDate"
                      name="Repayment Date Based"/>

      </div>
    )
  }
}

const a = Form.create()(CollectionRepaymentDateBased)
export default a

